<template>
  <span :endTime="endTime" :endText="endText">
    <slot v-if="!state.isExpired">
      <span v-if="prefixText">{{ prefixText }}</span>
      <span :class="contentClass">{{ state.content }}</span>
      <span v-if="suffixText">{{ suffixText }}</span>
    </slot>
  </span>
</template>

<script>
import { reactive, watch, onMounted, onBeforeUnmount } from "vue";
export default {
  name: "CountDown",
  props: {
    // 到期时间
    endTime: {
      type: [String, Number],
      default: "",
    },
    //开始 系统时间
    startTime: {
      type: Number,
      default: 0,
    },
    // 到期后显示的文本
    endText: {
      type: String,
      default: "",
    },
    // 前缀
    suffixText: {
      type: String,
      default: "",
    },
    // 后缀
    prefixText: {
      type: String,
      default: "",
    },
    // 倒计时样式
    contentClass: {
      type: String,
      default: "",
    },
  },
  emits: ["stop"],
  setup(props, { emit }) {
    const state = reactive({
      content: "",
      time: props.endTime,
      startTime: props.startTime,
      isExpired: true,
      timer: null,
    });
    watch(
      () => state.time,
      () => {
        countdowm();
      }
    );
    watch(
      () => props.endTime,
      (val) => {
        state.time = val;
      }
    );
    const initFamat = () => {
      let nowTime;
      let time = state.startTime;
      if (props.startTime) {
        nowTime = new Date(time);
      } else {
        nowTime = new Date();
      }

      let endTime = new Date(state.time * 1000);
      let t = endTime.getTime() - nowTime.getTime();
      // console.log(t);
      if (t > 0) {
        state.isExpired = false;
        let day = Math.floor(t / 86400000);
        let hour = Math.floor((t / 3600000) % 24);
        let min = Math.floor((t / 60000) % 60);
        let sec = Math.floor((t / 1000) % 60);
        hour = hour < 10 ? "0" + hour : hour;
        min = min < 10 ? "0" + min : min;
        sec = sec < 10 ? "0" + sec : sec;
        let format = "";
        if (day > 0) {
          format = `${day}:${hour}:${min}:${sec}`;
        }
        if (day <= 0 && hour > 0) {
          format = `${hour}:${min}:${sec}`;
        }
        if (day <= 0 && hour <= 0) {
          format = `${min}:${sec}`;
        }
        state.content = format;
        if (props.startTime) {
          state.startTime = time + 1000;
        }
      } else {
        state.isExpired = true;
        if (state.timer) {
          clearInterval(state.timer);
          state.timer = null;
        }
        state.content = state.endText;
        emit("stop");
      }
      return initFamat;
    };
    const countdowm = () => {
      state.timer = setInterval(initFamat(), 1000);
    };
    onMounted(() => {
      //试试先一次型再循环调用
      countdowm();
    });
    onBeforeUnmount(() => {
      if (state.timer) {
        clearInterval(state.timer);
        state.timer = null;
      }
    });
    return {
      state,
      countdowm,
      initFamat,
    };
  },
};
</script>
<style lang="scss" scoped></style>
